<template>
  <div class="container">
    <!--<search></search>-->
    <div class="breadcrumb">
      <div class="breadcrumb-box">
        <a-breadcrumb class="tabs-content-breadcrumb" separator=">">
          <a-breadcrumb-item><a @click="goHome">首页</a></a-breadcrumb-item>
          <a-breadcrumb-item>资讯中心</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    <div class="information-content">
      <div class="information-tabs">
        <div class="information-tabs-item" v-for="(item, index) in tabs" :key="index" :class="{active: tabsActive === index}" @click="changeActive(index)">
          {{ item.name }}
        </div>
      </div>
      <div class="information-list">
        <div class="information-list-item" v-for="(item, index) in information" :key="index" @click="goDetail(item)">
          <div class="information-list-item-img">
            <img :src="item.img" alt="">
          </div>
          <div class="information-list-item-content">
            <div class="information-list-item-content-header">{{item.title}}</div>
            <div class="information-list-item-content-datetime">{{item.datetime}}</div>
            <div class="information-list-item-content-desc">{{item.desc}}</div>
          </div>
        </div>
        <div class="information-list-pagination">
          <a-pagination :current="currentPage" :total="500" :showSizeChanger="false">
            <template #itemRender="{ type, originalElement }">
              <a class="pagination-btn" v-if="type === 'prev'">上一页</a>
              <a class="pagination-btn" v-else-if="type === 'next'">下一页</a>
              <component :is="originalElement" v-else></component>
            </template>
          </a-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import { useRouter } from 'vue-router'
// import Search from "@/components/Search.vue";
export default defineComponent( {
  name: "Information",
  setup() {
    const router = useRouter()
    const currentPage = ref<number>(1)
    const tabsActive = ref<any>(0)
    const tabs = [
      {
        name: '全部资讯'
      },
      {
        name: '政策法规'
      },
      {
        name: '产业资讯'
      },
      {
        name: '园区公告'
      }
    ]
    const information = [
      {
        title: '看《阿凡达：水之道》，一定要来横店影城的CINITY影厅看',
        img: require('../../assets/img/news-img4.png'),
        datetime: '2022-12-02 17:02',
        desc: '如果你错过了13年前的IMAX版《阿凡达》，一定不要错过今年12月16日的CINITY版《阿凡达：水之道》。2009年，詹姆斯·卡梅隆在《阿凡达》中向观众介绍了潘多拉的世界。这部电影因其令人惊叹的3D拍摄而备受赞誉，并在当年全球票房超28亿美元！'
      },
      {
        title: '横店影视出品《龙马精神》曝全阵容剧照，吴京与成龙首演对手戏',
        img: require('../../assets/img/news-img5.png'),
        datetime: '2022-11-15 17:10',
        desc: '11月14日，横店影视旗下浙江横店影业有限公司出品的电影《龙马精神》发布全阵容角色剧照。该片由杨子编剧、执导，成龙、刘浩存、郭麒麟领衔主演，首次曝光特别出演吴京，主演余皑磊、容祖儿、于荣光、安志杰、小沈阳、郎月婷、释彦能在片中的造型，群星齐聚喜感十足。'
      },
      {
        title: '公告 | 2022横店影视节延期举办，我们的故事未完待续',
        img: require('../../assets/img/news-img6.png'),
        datetime: ' 2022-11-15 15:58',
        desc: '接东阳市新冠肺炎疫情防控工作指挥部通知，因该市六石街道突发疫情,根据国家疫情防控相关文件精神为确保横店影视节所有参会嘉宾的健康和安全原定于2022年11月23日至27日举办的2022横店影视节系列活动将延期举办'
      },
      {
        title: '青春力量 ！第九届“文荣奖”青年演员扶持计划第七批名单公布',
        img: require('../../assets/img/news-img7.png'),
        datetime: ' 2022-11-12 13:38',
        desc: '“青年强，则国家强”。横店作为中国影视产业的最大集聚地和梦工厂，亦是很多青年一代影视从业者事业的起点与艺术的摇篮。作为“文荣奖”今年重磅推出的项目，“青年演员扶持计划”面向所有对演艺事业抱有向往之心的青年演员进行征集邀约，鼓励青年演员们深刻学习和贯彻党的二十大精神，用匠心守护初心，讲好中国故事，传播好中国声音。'
      },
      {
        title: '横店影视出品《新神榜：杨戬》破2亿！导演赵霁：“国漫”之魂在于中国精气神',
        img: require('../../assets/img/news-img1.png'),
        datetime: '2022-08-25 19:25',
        desc: '《新神榜：杨戬》一开始，杨戬伴随着略显慵懒的口琴音乐亮相，而他的法宝也是一件可以折叠的口琴。对于这一设定，赵霁解释称，口琴设定是主创对杨戬性格探索后的结果，“有一点诙谐幽默，又有一点慵懒”。'
      },
      {
        title: '第十七届中国长春电影节与月23晚开幕《长津湖之水门桥》等入围“金鹿奖”影片名单',
        img: require('../../assets/img/news-img3.png'),
        datetime: '2022年08月25日  18:40',
        desc: '第十七届中国长春电影节与月23晚开幕。本届电影节以“新时代摇篮新力量新坐标”为主题，15部华语影片入围“金鹿奖”，其中，《长津湖之水门桥》《这个杀手不太冷静》《穿过寒冬拥抱你》《暗恋.橘生淮南》《古董局中局》等5部...'
      },
      {
        title: '横店影视多部作品入围牡丹奖、金鹿奖',
        img: require('../../assets/img/news-img2.png'),
        datetime: '2022年08月24日 19:24',
        desc: '近日，第三十二届浙江电视“牡丹奖”入选作品名单出炉，由横店影视旗下横店影视制作优先公司出品的电视剧《问天》及横店影视文化产业集聚区入区企业出品的电视剧《叛逆者》《尚食》《相逢时节》《刑警之海外行动》等作品榜上有名。'
      },
    ]
    const goHome = () => {
      router.push({
        path:'/home',
      })
    }
    const goDetail = (obj: object) => {
      console.log(obj)
      router.push({
        path:'/Home/InformationDetail',
      })
    }
    const changeActive = (index:number) => {
      tabsActive.value = index
    }
    return {
      currentPage,
      information,
      tabs,
      tabsActive,
      changeActive,
      goDetail,
      goHome
    }
  }
})
</script>

<style scoped lang="less">
.breadcrumb {
  background: #F1F1F1;
  .breadcrumb-box {
    width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding:  18px 0;
  }
}

.information-content {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  padding: 80px 0;

  .information-tabs {
    position: relative;
    width: 180px;
    .information-tabs-item {
      margin-bottom: 20px;
      height: 52px;
      border-radius: 2px;
      background: #FFFFFF;
      border: 1px solid #DBDBDB;
      font-size: 20px;
      color: #747474;
      line-height: 52px;
      cursor: pointer;
      text-align: center;
      &.active {
        position: relative;
        background: #FFF8EA;
        border: 1px solid #D6C0A8;
        color: #A67F50;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 4px;
          height: 100%;
          background: #D6C0A8;
        }
      }
    }
  }

  .information-list {
    width: 1000px;
    margin-left: 40px;
    .information-list-item {
      display: flex;
      margin-bottom: 20px;
      padding: 15px;
      background: url("../../assets/img/information/information-bg.png") no-repeat center / 100% 100%;
      cursor: pointer;

      &:hover {
        background: url("../../assets/img/information/information-bg-active.png") no-repeat center / 100% 100%;
      }

      .information-list-item-img {
        width: 200px;
        img {
          width: 100%;
        }
      }
      .information-list-item-content {
        margin-left: 20px;
        flex: 1;
        .information-list-item-content-header {
          width: 750px;
          margin-bottom: 16px;
          overflow: hidden;//溢出隐藏
          white-space: nowrap;//禁止换行
          text-overflow: ellipsis;//...
          font-size: 24px;
          color: #313233;
        }

        .information-list-item-content-datetime {
          margin-bottom: 10px;
          font-size: 16px;
          color: #B0B5B8;
        }

        .information-list-item-content-desc {
          display: -webkit-box;//谷歌
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;//显示几行
          overflow: hidden;
          font-size: 16px;
          color: #A5A5A5;
          letter-spacing: 0.96px;
          text-align: justify;
        }
      }
    }

    .information-list-pagination {
      text-align: center;

      .pagination-btn {
        padding: 8px 20px;
        border-radius: 50px;
        background: linear-gradient(90deg, #C09E78 0%, #E7D0AC 100%);
        color: #FFFFFF;
      }

      :deep(.ant-pagination) {
        .ant-pagination-item {
          border: none;
          //font-size: 16px;
          a {
            color: #9A9999;
          }
        }

        .ant-pagination-disabled {
          .pagination-btn {
            padding: 8px 20px;
            border-radius: 50px;
            background: linear-gradient(90deg, #bdbdbd 0%, #eae9e9 100%);
            color: #FFFFFF;
          }
        }

        .ant-pagination-item-active {
          font-size: 20px;
          a {
            color: #C09E78;
          }
        }
      }

    }
  }
}
</style>
